<script setup lang="ts">
import { ref, computed, reactive, toRefs } from 'vue';
import { rewards as _rewords } from '../utils/config'

const rewards = reactive(_rewords)
const props = defineProps(['totalScore'])
// 没有toRefs结构出来的数据就不能响应
const { totalScore } = toRefs(props)
let noBegin = false
const activeNames = ref([0, 2])
// console.log('~~totalScore', totalScore.value)
interface IReward {
  name: string
  status: 'doing' | 'done' | 'none'
  score: number
  img: string
}
let restTotalScore = computed(() => {
  let _restTotalScore = totalScore.value
  rewards.forEach((item: IReward) => {
    if (noBegin) return
    if (_restTotalScore < item.score) {
      item.status = 'doing'
      noBegin = true
    } else {
      item.status = 'done'
      _restTotalScore -= item.score
    }
  })
  noBegin = false
  return _restTotalScore
})

const collapseList = computed(() => [rewards.filter(item => item.status === 'done'), rewards.filter(item => item.status !== 'done')])
</script>

<template>
  <el-collapse v-model="activeNames">
    <span style='display: none;'>引用一下restTotalScore才可以使其computed中的内容首次执行:{{ restTotalScore }}</span>
    <template v-for='(item, idx) in collapseList'>
      <el-collapse-item :title="idx === 0 ? '已获得的奖品' : '正在努力的奖品'" :name="idx + 1">
        <ul class='reward'>
          <li v-for='{ name, status, score, img } in item'>
            <el-card :body-style="{ padding: '0px' }">
              <div class='wrap'>
                <div class="l">
                  <div className='img' :style='{ backgroundImage: `url(${img})` }' />
                </div>
                <div class="r">
                  <h4>{{ name }}</h4>
                  <strong class='score'><span class='num'>{{ score }}</span>分 / <span class='num'> {{ score / 5
                      }}</span>天</strong>
                  <div class='desc'>
                    <div class='done' v-if='status === "done"'>已完成(*￣︶￣)</div>
                    <div class='doing' v-else-if='status === "doing"'>签到 <strong class='num'>&nbsp;{{ (score -
                      restTotalScore)
                      /
                      5
                        }}&nbsp;</strong> 天即可获得！
                    </div>
                    <div class='noBegin' v-else>等你来拿呦！</div>
                  </div>
                </div>
              </div>
              <div class="progress" v-if='idx === 1'>
                <template v-if='status !== "done"'>
                  <el-steps style="max-width: 600px" :active="status === 'doing' ? (restTotalScore / 5 - 1) : -1"
                    finish-status="process">
                    <el-step v-for='(,idx) in Array(Math.ceil(score / 5))' />
                  </el-steps>
                </template>
              </div>
            </el-card>
          </li>
        </ul>
      </el-collapse-item>
    </template>
  </el-collapse>
</template>
<style scoped>
ul.reward {
  display: inline-flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 12px;
  list-style: none;
  padding-left: .75rem;

  &>li {
    width: calc((100% - 60px) / 4);
    background-color: var(--bg-200);
  }


  .wrap {
    display: flex;
    gap: 8px;

    .l,
    .r {
      flex: auto;
    }

    .l {
      flex: 0;
      flex-basis: 38.2%;

      .img {
        height: 8rem;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        background-color: #fff;
      }
    }

    .r {
      h4 {
        margin-block: 1rem;
        font-size: 16px;
      }

      .score {
        color: var(--text-200);

        .num {
          font-size: 20px;
          color: var(--primary-200);
        }
      }

      .desc {
        color: var(--text-200);

        .num {
          font-size: 20px;
          color: var(--accent-100);
          background-color: var(--accent-200);
          text-shadow: 1px 1px black;
          box-shadow: inset 1px 1px 3px black;
        }
      }
    }
  }

  .progress {
    padding: .5rem;
    height: 48px;

    .el-steps {
      display: block;
      white-space: normal;

      :deep(.el-step__head.is-wait) {
        opacity: .88;
      }
    }
  }
}
</style>
